<script setup name="knowledge">
import { GetDeviceTypeAPI } from '@/api/device/equipment.js'
import {
  GetListAPI,
  AddDataAPI,
  EditDataAPI,
  DelDataAPI,
  GetDeiltsAPI,
} from '@/api/device/knowledge.js'
import AddFrom from './addForm.vue'
// vue3方法实例
const { proxy } = getCurrentInstance()
const { equipment_failure_type } = proxy.useDict('equipment_failure_type')
// 新增 || 修改 || 查看实例
const addFromRef = ref(null)

// 储存数据
const ruleForm = ref({})

// 各种状态及小数据
const state = reactive({
  row: [], // 选中数据
  ids: '', // 选中id
  delDisabled: false, // 多选
  examineDisabled: false, // 单选
  btnloading: false, //保存加载状态
  total: 0, // 列表总数量
  isShow: false, // 新增弹窗状态
  title: '新增', // 标题
  loading: false, // 表格加载状态
})

/**
 * 设备类型
 */
const deviceList = ref([])

// 按钮枚举
const btnList = ref([])

// 列表数据
const tabelData = ref([])

// 列表枚举
const column = ref([
  { label: '知识库编号', prop: 'knowledgeCode' },
  { label: '知识库名称', prop: 'knowledgeName' },
  // { label: '设备编码', prop: 'deviceCode' },
  { label: '设备名称', prop: 'deviceName' },
  { label: '故障类型', prop: 'knowledgeFailureTypeDict' },
  { label: '故障内容', prop: 'knowledgeFailureContent' },
  { label: '故障描述', prop: 'knowledgeFailureDescription' },
  { label: '故障分析', prop: 'knowledgeFailureAnalysis' },
  { label: '操作', prop: 'x' },
])

// 查询条件
const SelectList = ref([
  { label: '知识库编码', model: 'knowledgeCode', type: '输入框' },
  { label: '知识库名称', model: 'knowledgeName', type: '输入框' },

  { label: '设备编码', model: 'deviceCode', type: '输入框' },
  { label: '设备名称', model: 'deviceName', type: '输入框' },
  {
    label: '设备类型',
    model: 'deviceType',
    type: '下拉单选',
    opt: deviceList,
  },
  { label: '设备型号', model: 'deviceUnitType', type: '输入框' },
  {
    label: '故障类型',
    model: 'knowledgeFailureType',
    type: '下拉单选',
    opt: equipment_failure_type,
  },
])

// 查询条件 分页
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 初始化按钮
const initBtn = () => {
  btnList.value = [
    {
      label: '新增',
      type: 'add',
      hasPermi: 'device:repair:knowledge:add',
    },
  ]
}
initBtn()

// 条件查询
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((itemKey) => (query[itemKey] = obj[itemKey]))
  getList()
}
/**
 * 设备下拉
 */
const getDeviceType = async () => {
  try {
    const res = await GetDeviceTypeAPI()
    deviceList.value = res.data
  } catch {
  } finally {
  }
}
getDeviceType()
// 勾选列表数据时
const handleSelectionChange = ({ ids, row }) => {
  state.ids = ids
  state.row = row
  state.multipleDis = !row.length
  state.singleDis = row.length != 1
  initBtn()
}
handleSelectionChange({ ids: [], row: [] })

// 新增弹窗
const addDic = () => {
  state.title = '新增'
  state.isShow = true
}

// 修改弹窗
const editDic = async (id) => {
  state.title = '修改'
  proxy.loading('请求中，请稍后')
  try {
    const { data: res } = await GetDeiltsAPI(id)
    ruleForm.value = res
    state.isShow = true
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 查看弹窗
const seeDic = async (id) => {
  state.title = '查看'
  proxy.loading('请求中，请稍后')
  try {
    const { data: res } = await GetDeiltsAPI(id)
    ruleForm.value = res
    state.isShow = true
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 新增提交后台
const addSub = async () => {
  const result = await addFromRef.value.submit()
  if (!result) return
  state.btnloading = true
  try {
    await AddDataAPI(result)
    getList()
    close()
    proxy.successMsg('新增成功！')
  } catch (err) {
    console.error(err)
  } finally {
    state.btnloading = false
  }
}

// 修改提交后台
const editSub = async () => {
  const result = await addFromRef.value.submit()
  if (!result) return
  state.btnloading = true
  try {
    await EditDataAPI(result)
    getList()
    close()
    proxy.successMsg('修改成功！')
  } catch (err) {
    console.error(err)
  } finally {
    state.btnloading = false
  }
}

// 删除
const remove = async (id) => {
  const isif = await proxy.DelMessageBox()
  if (!isif) return
  proxy.loading('删除中，请稍后')
  try {
    await DelDataAPI(id)
    getList()
    close()
    proxy.successMsg('删除成功！')
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

// 弹窗取消
const close = () => {
  state.isShow = false
  ruleForm.value = false
}

// 获取列表数据
const getList = async () => {
  state.loading = false
  try {
    const res = await GetListAPI(query)
    state.total = res.total
    tabelData.value = res.rows
  } catch (err) {
    console.error(err)
  } finally {
    state.loading = false
  }
}

getList()

// 计算区域
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="SelectList" @selectSubmit="selectSubmit" />
    <el-card class="box-card">
      <p-button :list="btnList" @add="addDic" />
      <p-table
        :loading="state.loading"
        keyId="knowledgeId"
        :column="column"
        :data="tabelData"
        @change="handleSelectionChange"
        :total="state.total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <p-dictTag
            v-if="column.prop == 'repairState'"
            :options="equipment_repair_status"
            :value="record.repairState"
          />
          <p-operate
            v-if="column.prop == 'x'"
            :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                text: '修改',
                type: 'primary',
                hasPermi: 'device:repair:knowledge:edit',
              },
              {
                icon: 'Delete',
                emit: 'remove',
                text: '删除',
                type: 'danger',
                hasPermi: 'device:repair:knowledge:remove',
              },
              {
                icon: 'Search',
                emit: 'look',
                text: '查看',
                type: 'primary',
                hasPermi: 'device:repair:knowledge:query',
              },
            ]"
            @edit="editDic(record.knowledgeId)"
            @remove="remove(record.knowledgeId)"
            @look="seeDic(record.knowledgeId)"
          />
        </template>
      </p-table>
    </el-card>
    <!-- 新增 || 修改 || 查看弹框 -->
    <p-dialog
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      :title="state.title"
      @close="close"
      width="60%"
    >
      <template #body>
        <AddFrom
          ref="addFromRef"
          :is-show="state.isShow"
          :disabled="state.title == '查看'"
          :data="ruleForm"
        />
      </template>
    </p-dialog>
  </div>
</template>

<style lang="scss" scoped>
.box-card {
  margin-top: 20px;
}
</style>
